<template>
  <div class="FlexFlow-Box">
    <div class="FlexFlowConenter">
      <div class="FlexFlow-Box-select">
        <span>FlexFlow</span>
        <select @change="getIndex">
          <option v-for="(itme,index) in value" :key="index" :value="itme.value"  >{{itme.value+"/"+itme.Title}}</option>
        </select>
      </div>
      <div class="FlexFlow" :style="valueClass">
        <div class="Chid">F</div>
        <div class="Chid">l</div>
        <div class="Chid">e</div>
        <div class="Chid">x</div>
        <div class="Chid">F</div>
        <div class="Chid">l</div>
        <div class="Chid">O</div>
        <div class="Chid">w</div>
      </div>
    </div>
    <FelxWrop></FelxWrop>
  </div>
</template>
<script>
import FelxWrop from '../views/flex-wrap'
export default {
  data() {
    return {
      value: [
        { value: "row",Title:'从左向右排列' },
        { value: "row-reverse" ,Title:'从右向左排列'},
        { value: "column" ,Title:'上向下排列'},
        { value: "initial",Title:'默认row属性'},
        { value: "inherit",Title:'继承父级盒子属性' }
      ],
      valueClass: ""
    };
  },
  components: {
    FelxWrop
  },
  beforeCreate: function() {
    // 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
  },
  created: function() {
    // 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，el 属性目前尚不可用。

    this.click(this.key);
  },
  beforeMount: function() {},
  methods: {
    // 在挂载开始之前被调用：相关的 render 函数首次被调用。

    click(Vlue, key) {
      this.$store.state.HeaderTitle = "FlexFlow";
    },
    getIndex(index) {
       this.valueClass = "flex-flow:" +index.target.value +";";
    }
  }
};
</script>

<style lang="scss"  scope>
.FlexFlow-Box {
  flex: 1;
  background-color: whitesmoke;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.FlexFlowConenter {
  flex: 1;
  background-color: chocolate;
  display: flex;
  flex-direction: column;
}
.FlexFlow-Box-select {
  width: 100%;
  height: 20px;
  background-color: bisque;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.FlexFlow {
  display: flex;
  flex: 1;
  background-color: cadetblue;
  justify-content: center;
  align-items: center;
}
.select {
  font-size: 16px;
}
.Chid {
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  color: white;
  border:1px solid aquamarine;
  margin: 10px;

}
.Chid:hover{
  background-color: red;
}
</style>